<template>
	<view>
		<u-navbar title="分类" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="page">
			<view class="primaryList">
				<view class="primaryList-item" v-for="item, index in  getclassifyone" :key="item.id"
					@click="primaryListClick(index)">
					<view class="primaryList-item-title" :class="{ active: curIndex == index }">{{ item.name }}</view>
				</view>
			</view>
			<view class="children">
				<view class="childrenItem" v-for="childrenItem in getclassifyone[curIndex].children" :key="childrenItem.id"
					>
					<image class="img" :src="childrenItem.url" @click="goClassifyDetails(getclassifyone[curIndex].name,childrenItem.name)"></image>
					<view clas="childrenItem-title">{{ childrenItem.name }}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				curIndex: 0,
			}
		},
		computed: {
			...mapGetters(['getclassifyone'])
		},
		methods: {
			goClassifyDetails(fatherName, childName) {
				let data=fatherName+'/'+childName
				console.log(data)
				this.$store.dispatch('GetClassifyDetail',data)
				this.$Router.push({
					name: "detailclassify",
					params: {
						childName
					}
				})
			},
			primaryListClick(index) {
				console.log("🚀 ~ file: classify.vue ~ line 242 ~ primaryListClick ~ index", index)
				// index
				this.curIndex = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;

		.page {
			height: 100%;
			display: flex;
			flex-direction: row;

			.primaryList {
				width: 8rem;
				text-align: center;
				background: #fff;
				border-bottom-right-radius: 2rem;

				.primaryList-item {
					height: 3rem;

					.primaryList-item-title {
						color: #333;
						font-size: 0.8rem;
						line-height: 3rem;

					}

					.active {
						font-size: 1rem;
						color: $uni-color-theme-10;
					}
				}
			}

			.children {
				margin-top: 2rem;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: 100%;
				height: 7rem;
				padding-top: 0.5rem;
				padding-left: 0.5rem;
				// background: #fff;

				.childrenItem {
					height: 7rem;
					// background: red;
					width: 33%;
					text-align: center;
					// background: #fff;

					.img {
						width: 3rem;
						height: 4rem;
						border-bottom: 1px solid #eee;
					}

					.childrenItem-title {
						color: #333;
					}
				}
			}
		}
	}
</style>
